<!--
 * @Author: your name
 * @Date: 2021-06-07 20:25:59
 * @LastEditTime: 2021-06-07 21:40:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jz-ui\src\pages\user\User.vue
-->
<template>
  <div>
    <!--表单-->
    <div>
      <el-row>
        <el-col :span="20">
          <el-form :inline="true" size="small">
            <el-form-item>
              <el-input placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="param.status" placeholder="请选择状态" clearable>
                <el-option
                  v-for="item in statusOption"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="param.roleId" placeholder="请选择角色" clearable>
                <el-option
                  v-for="item in roleOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" style="text-align:right">
          <el-button type="primary" size="small">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <!--表格-->
    <div>
      <el-table :data="users" size="small">
        <el-table-column width="60" prop="id" label="编号" align="center"></el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column prop="realname" label="姓名" align="center"></el-table-column>
        <el-table-column prop="username" label="角色" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" align="center">
          <template v-slot="scope">
            <span style="color:#409EFF" v-if="scope.row.gender=='male'" class="el-icon-male"></span>
            <span style="color:#F56C6C" v-else-if="scope.row.gender=='female'" class="el-icon-female"></span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template v-slot="scope">
            <el-tag size="mini" type="success">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="telephone" label="手机号" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="text" size="mini" style="color:black" @click=" setHandle(scope.row.id)">设置</el-button>
            <el-button type="text" size="mini" style="color:#67C23A" @click=" editHandle(scope.row.id)">编辑</el-button>
            <el-button type="text" size="mini" style="color:#F56C6C" @click="deleteHandle(scope.row.id)">删除</el-button>
            <el-button type="text" size="mini" style="color:#909399" @click="lookAtDetailHandle(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>  
</template>

<script>
import {get} from '@/utils/request'
export default {
  data(){
    return {
      statusOption:['禁用','正常'],
      roleOption:[],
      users:[],
      param:{},
    }
  },
  methods:{ 
    loadData(){
      let url = "/baseRole/query"
      get(url).then(resp => {
        this.roleOption = resp.data
      })
      url = "/baseUser/query"
      get(url,this.param).then(resp => {
        this.users = resp.data
      })
    },
    setHandle(id){
      this.$message({message:"该功能暂未开发！",type:"error"});
    },
    editHandle(id){
      this.$message({message:"该功能暂未开发！",type:"error"});
    },
    deleteHandle(id){
      this.$message({message:"该功能暂未开发！",type:"error"});
    },
    lookAtDetailHandle(id){
      this.$message({message:"该功能暂未开发！",type:"error"});
    }
  },
  created(){
    this.loadData()
  }
}
</script>

<style lang="css">

</style>
